<template>
  <div class="request-test-main">
    <div style="font-size: 18px; font-weight: 600; margin-bottom: 20px">
      模拟请求
    </div>
    <div>
      <el-button type="primary" @click="requestFirst">GET请求</el-button>
      <el-button type="primary" @click="requestSecond"
        >GET请求(对象参数)</el-button
      >
      <el-button type="primary" @click="requestThird">POST请求</el-button>
      <el-button type="primary" @click="requestForth">DELETE请求</el-button>
      <el-button type="primary" @click="resetInput">清空</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-input
        type="textarea"
        :rows="20"
        placeholder="返回内容"
        v-model="responseData"
      >
      </el-input>
    </div>
  </div>
</template>

<script>
/**
 * @Version 1.0.0
 * @Author DemoHui
 * @Date 2022/09/29
 */
import { buildMenus, getMenus, addUser, delUser } from "@/api/example/system";
export default {
  name: "index",
  data() {
    return {
      responseData: "",
    };
  },
  methods: {
    resetInput() {
      this.responseData = "";
    },
    // 需要配置 src/utils/request.js 文件中 baseURL: "http://39.106.10.80:8000",
    requestFirst() {
      buildMenus().then((res) => {
        this.responseData = JSON.stringify(res);
      });
    },
    requestSecond() {
      let params = {
        page: 0,
        size: 10,
        sort: "id,desc",
      };
      getMenus(params).then((res) => {
        this.responseData = JSON.stringify(res);
      });
    },
    requestThird() {
      let params = {
        id: null,
        username: "yg",
        nickName: "杨过",
        gender: "男",
        email: "yg@163.com",
        enabled: "false",
        roles: [{ id: 4 }],
        jobs: [{ id: 13 }],
        dept: { id: 18 },
        phone: 18351888370,
      };
      addUser(params).then((res) => {
        this.responseData = JSON.stringify(res);
      });
    },
    requestForth() {
      let params = [20];
      delUser(params)
        .then((res) => {
          this.responseData = JSON.stringify(res);
        })
        .catch();
    },
  },
};
</script>

<style scoped>
.request-test-main {
  padding: 20px;
}
</style>
